Skip to content

perf(frontend): Implement Lazy Image Loading and Route Chunking for Faster Web App Initial Load#658

Merged
ritesh-1918 merged 2 commits into
ritesh-1918:gssocfrom
advikdivekar:fix/issue-638-lazy-loading-route-chunking
May 31, 2026
Merged

perf(frontend): Implement Lazy Image Loading and Route Chunking for Faster Web App Initial Load#658
ritesh-1918 merged 2 commits into
ritesh-1918:gssocfrom
advikdivekar:fix/issue-638-lazy-loading-route-chunking

Conversation

@advikdivekar
Copy link
Copy Markdown

@advikdivekar advikdivekar commented May 29, 2026

Summary

Fixes #638

This PR refactors App.jsx to use React.lazy() and Suspense boundaries for all route-level components, dramatically reducing the initial JS bundle size on first load.

Changes

  • Frontend/src/App.jsx — Full lazy routing refactor

    • All 35+ page components converted to React.lazy() dynamic imports
    • Grouped by route category for Vite's automatic chunk splitting:
      • Auth pages (Login, Signup, ForgotPassword, etc.) remain eagerly loaded — critical path
      • Route guards (AdminProtectedRoute, ProtectedRoute) remain eagerly loaded — tiny, needed before any lazy chunk loads
      • User pages, admin pages, master-admin pages, marketing, and legal pages all lazily loaded
    • Each route is wrapped in its own Suspense boundary with context-appropriate fallback
    • AnimatePresence moved to inner AppRoutes component so useLocation() hook works correctly

  • Frontend/src/components/ui/page-skeleton.jsx — Skeleton loader components

    • PageSkeleton: full-app shell skeleton with top nav shimmer, sidebar shimmer, stat card grid, content rows with avatar placeholders — used for all authenticated routes
    • MinimalSkeleton: centered card shimmer — used for auth, lobby, and legal pages
    • Both use Tailwind animate-pulse shimmer and include role="status" + aria-label for accessibility

Bundle impact

Before: single index.js chunk (~all pages bundled together)
After: per-route chunks loaded on demand — landing page visits no longer download admin or user page code

Test Plan

  • Run npm run dev — app loads, no console errors
  • Navigate to /user/dashboard — PageSkeleton flashes briefly then content renders
  • Navigate to /admin/settings — admin chunk loads on demand
  • Run npm run build — verify Rollup outputs multiple chunks, vendor chunk present
  • Test 404 route — NotFound component renders correctly

@advikdivekar
perf(frontend): implement React.lazy route chunking and Suspense skel…
6ba911f 
…eton loaders for faster initial load

Closes ritesh-1918#638

- Refactor Frontend/src/App.jsx: convert all 35+ page component imports to
  React.lazy() dynamic imports, grouped by route category (auth/user/admin/
  master-admin/marketing/legal); auth pages and route guards remain eagerly
  loaded for instant critical path; each route wrapped in dedicated Suspense
  boundary; AnimatePresence moved to inner AppRoutes component so Router
  context is available
- Add Frontend/src/components/ui/page-skeleton.jsx: two skeleton components —
  PageSkeleton (full shell with nav, sidebar, stat cards, and content rows)
  and MinimalSkeleton (centered card for auth/lobby pages); both use CSS
  animate-pulse shimmer and include aria role/label for accessibility
@chatgpt-codex-connector
Copy link
Copy Markdown

chatgpt-codex-connector Bot commented May 29, 2026

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 29, 2026

@advikdivekar is attempting to deploy a commit to the ritesh Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 29, 2026 •
edited
Loading

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2d7e12df-4b73-4b5e-b0bc-04168dde4fe8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@advikdivekar
Copy link
Copy Markdown
Author

advikdivekar commented May 29, 2026

@ritesh-1918 please review my PR, thank you

@ritesh-1918 ritesh-1918 added gssoc GirlScript Summer of Code gssoc:approved GSSoC Approved PR level:intermediate Intermediate level difficulty quality:exceptional Exceptional code quality type:feature New feature labels May 31, 2026
@ritesh-1918
Copy link
Copy Markdown
Owner

ritesh-1918 commented May 31, 2026

Superb implementation, @advikdivekar! I've successfully resolved all conflicts in your PR and queued it for merging into gssoc.

⚠️ MANDATORY STEPS FOR LEADERBOARD CREDITS:
To ensure you receive full points, please make sure you have taken 10 seconds to:

Keep up the outstanding work! Let's build together! 🔥

@ritesh-1918 ritesh-1918 merged commit f424845 into ritesh-1918:gssoc May 31, 2026
2 of 3 checks passed
@ritesh-1918 ritesh-1918 added the type:performance Performance optimizations and fixes label May 31, 2026
@ritesh-1918
Copy link
Copy Markdown
Owner

ritesh-1918 commented May 31, 2026

Hi @advikdivekar! 🙌

Thank you so much for your excellent contribution: "perf(frontend): Implement Lazy Image Loading and Route Chunking for Faster Web App Initial Load"! We really appreciate the high-quality code and effort you have put into the platform.

Just a quick, friendly heads-up as we prepare our manual merging and verification queues—please make sure to complete all the mandatory community steps listed below.

Once those manual steps are verified, we'll get your PR officially merged into the gssoc branch (or keep it neatly cataloged if closed as integrated) and assign it the highest possible GSSoC S-Tier labels to maximize your leaderboard points!

Let's build something amazing together! 🚀🔥

🌟 Community Support & Network Steps (Take 10 Seconds!)

As we prepare our manual verification and merging queues, please make sure you have taken a moment to complete these required steps to finalize your points:

  1. ⭐ Star this repository: https://github.com/ritesh-1918/HELPDESK.AI (Mandatory)
  2. 🍴 Fork this repository: https://github.com/ritesh-1918/HELPDESK.AI/fork (Mandatory)
  3. 👤 Follow @ritesh-1918 on GitHub: https://github.com/ritesh-1918 (Mandatory - manual step)
  4. 💼 Connect on LinkedIn: https://www.linkedin.com/in/ritesh1908/ (Mandatory)

Note: Having these steps completed manually is required before your PR points are officially cleared.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

gssoc:approved GSSoC Approved PR gssoc GirlScript Summer of Code level:intermediate Intermediate level difficulty quality:exceptional Exceptional code quality type:feature New feature type:performance Performance optimizations and fixes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@advikdivekar @ritesh-1918